<template>
  <div class="champion">
    <!-- 头部 -->
    <div class="header">
        <img src="@/pic/0.jpg" class="headerImg" width="100%">
    </div>
    <!-- 内容区 -->
    <div class="content">
        <!-- 英雄类型 -->
        <ul class="seleteChecklist">
            <li class="selete-item" @click="getChampion('所有英雄')">
              <input ref="choice1" type="radio" name="xp" id="all" :checked="isChecked">
              <label for="all">所有英雄</label>
            </li>
            <li class="selete-item" @click="getChampion('fighter')">
              <input ref="choice2" type="radio" name="xp" id="warrior">
              <label for="warrior">战士</label>
            </li>
            <li class="selete-item" @click="getChampion('mage')">
              <input ref="choice3" type="radio" name="xp" id="caster">
              <label for="caster">法师</label>
            </li>
            <li class="selete-item" @click="getChampion('assassin')">
              <input ref="choice4" type="radio" name="xp" id="assassin">
              <label for="assassin">刺客</label>
            </li>
            <li class="selete-item" @click="getChampion('tank')">
              <input ref="choice5" type="radio" name="xp" id="tank">
              <label for="tank">坦克</label>
            </li>
            <li class="selete-item" @click="getChampion('marksman')">
              <input ref="choice6" type="radio" name="xp" id="archer">
              <label for="archer">射手</label>
            </li>
            <li class="selete-item" @click="getChampion('support')">
              <input ref="choice7" type="radio" name="xp" id="support">
              <label for="support">辅助</label>
            </li>
        </ul>
        <!-- 搜索框 -->
       
          <Input size="large" placeholder='请输入您要搜索的英雄名' class="input-search" v-model="value" @on-change="selectChampionByTitle" />
          <!-- <input  v-model="value" type="text" class="input-search" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您要搜索的英雄名'" v-on:input="selectChampionByTitle"> -->
        
        <div class="hero-list">
            <!-- 要展示的英雄列表 -->
            <heroCard v-for="(hero, index) in heroes" :hero="hero" :key="index"  />
            <div class="tip" v-show="isDisplay">
              <p>非常抱歉，查无此英雄嗟！ 建议您输入正确的英雄名称！</p>
            </div>
        </div>
        
    </div>
        
  </div>
</template>
<script>

import heroCard from "@/components/utils/heroCard.vue";

import {getAllChampion,getChampionById,getChampionByJob,getChampionByTitle} from "@/api/champion";
export default {
  data() {
    return {
      heroes:[],
      value:"",
      isChecked:true,
      isDisplay:false,
      
    }
  },
  
  methods:{
    //按钮点击切换英雄种类
    getChampion(job) {
        //console.log(job)
        
        getChampionByJob(job).then((res)=>{
          //console.log(res);
          this.heroes=res;
        })
    },
    //搜索框搜索英雄
    selectChampionByTitle() {
        console.log(this.value)
        if(this.value==null || this.value=="") {
           // console.log(this.$refs.choice1.checked)
            this.isDisplay=false;
            //如果搜索框内容为空，将默认回到初始状态，就是所有英雄按钮选中的转态
            this.$refs.choice1.checked=true
        }
        getChampionByTitle(this.value).then((res)=>{
          //console.log(res);
          if(res.length==0) {
              
              this.isDisplay=true;
          }
          this.heroes=res;
          
        })
    }
  },
  //页面加载获取所有英雄
  mounted() {
      getAllChampion().then((res)=>{
        //console.log(res);
        this.heroes=res;
      })
  },
};
</script>
<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .header {
    width : 100%;
    height : 227px;
    margin-bottom: 10px;
    box-shadow: 0 0 2px rgba(0,0,0,.1);
  }

 
  .content {
    width: 100%;
    //height: auto;
    min-height: 500px;
    border: 1px solid #e1e1e1;
    box-shadow: 0 0 2px rgba(0,0,0,.1);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start
  }

  li {
    list-style: none;
  }
  .seleteChecklist {
    margin-left: 15px;
    width: 70%;
    padding-top: 10px;
    display: inline-flex;
    height: 50px;
  }
  .selete-item {
    margin-right: 17px;
    cursor: pointer;
    height: 20px;
    cursor: pointer;
  }
  label {
    font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
    color: #666;
    cursor: pointer;
    padding-left: 3px;
  }


.input-search {
    float: right;
    width: 24%;
    height: 60px;
    line-height: 30px;
    margin-top: 10px;
    margin-right: 10px;
}

.hero-list{
  display: inline-flex;
  flex-wrap: nowrap;
  width: 100%;
  height: auto;
  margin: 0 auto;
  justify-content: flex-start;
  padding: 20px;
  flex-wrap: wrap;
  align-content: flex-start;
}

.tip{
  color: red;
}
</style>